<template>
  <!-- <button class="v-button">{{ propValue.value }}</button> -->
  <div class="flex-wrap v-button" :class="propValue.themeBtnClass">
  
    <div v-for="(item,i) of 10" :key="i">
    <a :href="propValue.link?propValue.link:'javascript:;'" :target="propValue.target?'_blank':''">
      <div   v-if="propValue.indexedDB == (i+1)" class=" item_btn" :class="['item_btn'+(i+1),(!propValue.is_background)?propValue.is_backType==1?'hoverItem_btn':'':'',propValue.is_border?'borderhover_btn':'']" :style="BtnsetStyle(propValue,(i+1))">{{ propValue.value }}
       
      <img v-if="propValue.is_icon" :style="{width:propValue.iconwidth+'rem','object-fit': 'contain'}" :src="propValue.icon" alt="">
      </div>
      </a>
    </div>

    <!-- <div v-if="propValue.indexedDB == 2">
      <div class="item_btn2 item_btn">{{ propValue.value }}</div>
    </div>

    <div v-if="propValue.indexedDB == 3">
      <div class="item_btn3 item_btn">{{ propValue.value }}</div>
    </div>

    <div v-if="propValue.indexedDB == 4">
      <div class="item_btn4 item_btn">{{ propValue.value }}</div>
    </div>

    <div v-if="propValue.indexedDB == 5">
      <div class="item_btn5 item_btn">{{ propValue.value }}</div>
    </div>
    <div v-if="propValue.indexedDB == 6">
      <div class="item_btn6 item_btn">{{ propValue.value }}</div>
    </div>
    <div v-if="propValue.indexedDB == 7">
      <div class="item_btn7 item_btn">{{ propValue.value }}</div>
    </div>

    <div v-if="propValue.indexedDB == 8">
      <div class="item_btn8 item_btn">{{ propValue.value }}</div>
    </div>

    <div v-if="propValue.indexedDB == 9">
      <div class="item_btn9 item_btn">{{ propValue.value }}</div>
    </div>

    <div v-if="propValue.indexedDB == 10">
      <div class="item_btn10 item_btn">{{ propValue.value }}</div>
    </div> -->

  </div>
</template>

<script>

export default {
  props: {
    propValue: {
      type: Object,
      default: "",
    },
    element: {
      type: Object,
      default: () => {},
    },
  },
  watch: {
    propValue: {
      handler: function (value) {
        console.log(value.themeBtn_gradient_color);
        document
          .getElementsByClassName(this.propValue.themeBtnClass)[0]
          .style.setProperty("--themeBtn", value.themebtnColor);
        document
          .getElementsByClassName(this.propValue.themeBtnClass)[0]
          .style.setProperty(
            "--themeBtn-gradient-color",
            value.themeBtn_gradient_color
          );
          if(!this.propValue.is_background&&this.propValue.is_backType==1){
        document
      .getElementsByClassName(this.propValue.themeBtnClass)[0]
      .style.setProperty(
        "--themeBtn-hover-color",
        this.propValue.btnthemeHover
      );
      }
            if(this.propValue.is_border){
        document
      .getElementsByClassName(this.propValue.themeBtnClass)[0]
      .style.setProperty(
        "--themeBtn-borderhover-color",
        this.propValue.bordeHoverColor
      );
      }
      },
      deep: true,
    },
  },
  created(){
    this.propValue.themeBtnClass=this.propValue.themeBtnClass.split('_')[0]+'_'+new Date().getTime()+Math.floor((Math.random()*100))
  },
  mounted() {
    console.log(this.propValue.themebtnColor,'111');
    document
      .getElementsByClassName(this.propValue.themeBtnClass)[0]
      .style.setProperty("--themeBtn", this.propValue.themebtnColor);
    document
      .getElementsByClassName(this.propValue.themeBtnClass)[0]
      .style.setProperty(
        "--themeBtn-gradient-color",
        this.propValue.themeBtn_gradient_color
      );
      if(!this.propValue.is_background&&this.propValue.is_backType==1){
        document
      .getElementsByClassName(this.propValue.themeBtnClass)[0]
      .style.setProperty(
        "--themeBtn-hover-color",
        this.propValue.btnthemeHover
      );
      }
      if(this.propValue.is_border){
        document
      .getElementsByClassName(this.propValue.themeBtnClass)[0]
      .style.setProperty(
        "--themeBtn-borderhover-color",
        this.propValue.bordeHoverColor
      );
      }
  },
  methods:{
    BtnsetStyle(value,i){
        return{
            'border-radius':value.radius+'rem',
            'opacity':value.opacity+'%',
            'width':this.element.style.width+'rem',
            'height':this.element.style.height+'rem',
            'background':(!this.propValue.is_background&&this.propValue.is_backType!=1)?`url(${this.propValue.btnBackground})`:'',
            border:this.propValue.is_border?`${this.propValue.borderWidth+'rem'} solid ${this.propValue.borderColor}`:``,
            'box-shadow':this.propValue.is_shadow?`${this.propValue.Xshadow}rem ${this.propValue.Yshadow}rem ${this.propValue.shadow}rem ${this.propValue.shadowColor}`:''
        }
    }
  }
};
</script>

<style lang="scss" scoped>
@import url("../assets/css/themeBtn.css");

.v-button {
  --themeBtn: rgb(7, 108, 224);
  --themeBtn-gradient-color:rgba(7, 108, 224,0.5);
  --themeBtn-hover-color:rgb(7, 108, 224);
  --themeBtn-borderhover-color:rgba(0,0,0,0);
}
.hoverItem_btn:hover{
    background: var(--themeBtn-hover-color);
  }
  .item_btn{
        background-size: cover!important;
        background-repeat: no-repeat!important;
  }
  .borderhover_btn:hover{
    border-color: var(--themeBtn-borderhover-color)!important;
  }
// .v-button {
//   display: inline-block;
//   line-height: 1;
//   white-space: nowrap;
//   cursor: pointer;
//   background: #fff;
//   border: 1px solid #dcdfe6;
//   color: #606266;
//   -webkit-appearance: none;
//   text-align: center;
//   box-sizing: border-box;
//   outline: 0;
//   margin: 0;
//   transition: 0.1s;
//   font-weight: 500;
//   width: 100%;
//   height: 100%;
//   font-size: 14px;

//   &:active {
//     color: #3a8ee6;
//     border-color: #3a8ee6;
//     outline: 0;
//   }

//   &:hover {
//     background-color: #ecf5ff;
//     color: #3a8ee6;
//   }
// }
</style>
